<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改大小"
    width="30%"
    draggable
    @close="onDialogClose"
  >
    <el-input v-model="formData.x" placeholder="x" />
    <el-input v-model="formData.y" placeholder="y" />
    <el-input v-model="formData.w" placeholder="宽" />
    <el-input v-model="formData.h" placeholder="高" />
    <el-input v-model="formData.key" placeholder="编号" />

    <el-switch v-model="formData.batchSet" />

    <el-input
      v-if="formData.batchSet"
      v-model="formData.offestX"
      placeholder="偏移x"
    />
    <el-input
      v-if="formData.batchSet"
      v-model="formData.offestY"
      placeholder="偏移y"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onDelete">删除</el-button>

        <el-button type="primary" @click="onSaveInfo"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: ["visible", "data"],
  emits: ["update:visible"],

  data() {
    return {
      dialogVisible: false,
      editor: false,
      formData: {
        x: 0,
        y: 0,
        w: 16,
        h: 16,
        key: "0",
        offestX: 0,
        offestY: 0,
        batchSet: false,
      },
    };
  },
  methods: {
    onDelete() {
      this.$emit("delete", {
        ...this.formData,
      });
      this.onDialogClose();
    },
    onSaveInfo() {
      this.$emit("saved", {
        ...this.formData,
      });
      this.onDialogClose();
    },
    onDialogClose() {
      this.dialogVisible = false;
      this.$emit("update:visible", false);
    },
  },
  watch: {
    visible(nv, ov) {
      if (nv) {
        this.dialogVisible = nv;
        // console.log(props.data);
        this.editor = false;
        if (this.data.w) {
          this.editor = true;
          this.formData = {
            x: this.data.x,
            y: this.data.y,
            w: this.data.w,
            h: this.data.h,
            id: this.data.id,
            key: this.data.key,
            offestX: 0,
            offestY: 0,
            batchSet: false,
          };
        }
      }
    },
  },
};
</script>

<style>
</style>